const path = require('path')

module.exports = {
  mode: 'development',
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: './dist/',
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // loader是有顺序的，webpack肯定是先将所有css模块依赖解析完得到计算结果再创建style标签
        // 因此应该把style-loader放在css-loader的前面（webpack loader的执行顺序是从右到左）
        // loader: ['style-loader', 'css-loader'],
        // use中的loader是按照从后前处理
        use: [
          {
            loader: 'style-loader',
            options: {
              // style标签插入到dom中
              // insertInto: '#app',
              // 是否只使用一个style 标签
              singleton: true,
              transform: './css.transform.js'
            }
          }, {
            loader: 'css-loader',
            options: {
              minimize: true, // 压缩代码
              modules: true,   // 启用css-modules
              localIdentName: '[path][name]_[local]--[hash:base64:5]'
            }
          },
        ]
      },

      // 将插入页面中的style打包成link标签插入页面
      // {
      //   test: /\.css$/,
      //   use: [
      //     {
      //       loader: 'style-loader/url'
      //     }, {
      //       loader: 'file-loader'
      //     }
      //   ]
      // },
      // 使用style-useable,可以动态使用css
      // {
      //   test: /\.css$/,
      //   use: [
      //     {
      //       loader: 'style-loader/useable'
      //     }, {
      //       loader: 'css-loader'
      //     }
      //   ]
      // }
    ]
  }
}